<template>
  <div>
    <div class="banner">
      <img
        src="//img1.qunarzz.com/sight/p0/2008/b9/b9cc3ab2fbe4f0e7a3.water.jpg_600x330_41191030.jpg"
        alt=""
      />
      <div class="title">
        <span>上海海昌海洋公园(AAAA景区)</span>
        <span>视频<i class="iconfont">&#xe603;</i></span>
      </div>
    </div>
  </div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.banner {
  height: 0;
  width: 100%;
  padding-bottom: 55%;
  position: relative;
  overflow: hidden;
  img {
    width: 100%;
  }
  .title {
    position: absolute;
    bottom: 0.2rem;
    color: white;
    left: 0.2rem;
    font-size: 0.46rem;
    width: 100%;
    span {
      &:nth-child(2) {
        position: absolute;
        right: 0.3rem;
        bottom: -2px;
        i {
          font-size: 0.6rem;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
